import React, { Component } from "react";
//todo state是组件自己的状态，相当于data
//todo 只有类组件可以定义state

class App extends Component {
  //todo 定义state有两种方法
  //todo 1. 字面量定义
  // state = {
  //   count: 3,
  //   name: "zhangmou",
  // };

  //todo 2. 在构造函数的构造器里面定义state
  //todo constructor是在类被实例化的时候被自动调用
  constructor() {
    super();
    this.state = {
      count: 3,
      name: "zhangmou",
      show: true,
      list: ["zhangsan", "lisi", "wangwu"],
    };
  }

  render() {
    // console.log(this);
    const { count, name, show, list } = this.state;
    return (
      <>
        <h2>state</h2>
        <p>{count}</p>
        <p>{name}</p>
        {/* 相当于v-show */}
        {/* <p style={{ display: show ? "block" : "none" }}>
          hello state!
        </p> */}

        {/* 相当于v-if */}
        {/* {show ? <p>hello state!</p> : null} */}
        {show && <p>hello state!</p>}

        {/* 相当于循环渲染 */}
        <ul>
          {list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
